<template>
    <div class="VFilter">
        <Row type='flex' :gutter='16' justify="start" align='middle' class-name='rowStyle'>
            <Col v-for="i in init" :key="i.id">
            <Row type='flex' justify="start" align='middle'>
                <Col v-if="i.type!='button'">
                <span>{{i.label}}：</span>
                </Col>
                <Col v-if="i.type=='input'">
                <Input v-model="i.val" :placeholder="'请输入'+i.label"></Input>
                </Col>
                <Col v-if="i.type=='dateRange'">
                <DatePicker v-model="i.val" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                            placeholder="请选择日期" style="width: 200px"></DatePicker>
                </Col>
                <Col v-if="i.type=='datePicker'">
                <DatePicker type="date" v-model="i.val" format="yyyy-MM-dd" placeholder="请选择日期"
                            style="width: 200px"></DatePicker>
                </Col>
                <Col v-if="i.type=='select'">
                <Select v-model="i.val" style="width:200px">
                    <Option :value="n.val" v-for="n in i.option" :key="n.id">{{n.val}}</Option>
                </Select>
                </Col>
                <Col v-if="i.type=='button'">
                <Button type="primary" @click="show">{{i.label}}</Button>
                </Col>
            </Row>
            </Col>
        </Row>
    </div>
</template>

<script>
	import dateFmt from '@/tool/date';

	/**
	 * 2018.2.5
	 * @author TANGiMING
	 * <VFilter></VFilter>
	 * @description 一个筛选组件，在组件上使用:init="Array"来进行表格初始化
	 * @prop {String} label 必填，显示的label文字
	 * @prop {String} type 必填，选择控件的类型，有input、select、dateRange、datePicker、button
	 * @prop {String} val 必填，绑定的v-model数据
	 * @prop {Array} option 数组，当type为select的时候必填，val为option的值
	 **/
	export default {
		name: 'VFilter',
		props: ['init'],
		data() {
			return {
				formData: {},
				//模板
				vFitlers: [
					{
						label: '日期',
						type: 'dateRange',
						val: '',
						model: ['startDay', 'endDay']
					},
					{label: '内部订单号', type: 'input', val: '', model: 'orderId'},
					{
						label: '注册手机号',
						type: 'input',
						val: '',
						model: 'regMblNo'
					},
					{
						label: '逾期情况',
						type: 'select',
						val: '',
						model: 'overStatus',
						option: [{val: '中国'}, {val: '美国'}]
					},
					{label: '查询', type: 'button'}
				]
			};
		},
		mounted() {
		},
		methods: {
			show() {
				let filterObj = {};
				for (let i = 0; i < this.init.length; i++) {
					if (this.init[i].val) {
						if (this.init[i].type === 'dateRange') {
							filterObj[this.init[i].model[0]] = dateFmt(
								this.init[i].val[0],
								'YYYY-MM-DD'
							);
							if (!this.init[i].val[0])
								filterObj[this.init[i].model[0]] = null;
							filterObj[this.init[i].model[1]] = dateFmt(
								this.init[i].val[1],
								'YYYY-MM-DD'
							);
							if (!this.init[i].val[1])
								filterObj[this.init[i].model[1]] = null;
							continue;
						}
						if (this.init[i].type === 'datePicker') {
							this.init[i].val = dateFmt(
								this.init[i].val,
								'YYYY-MM-DD'
							);
						}
						filterObj[this.init[i].model] = this.init[i].val;
					} else {
						if (this.init[i].type !== 'button') {
							filterObj[this.init[i].model] = null;
						}
					}
				}
				this.$emit('getData', filterObj);
			}
		}
	};
</script>

<style lang="less">
    .VFilter {
        .rowStyle {
            padding: 10px 0 25px 0;
        }
    }
</style>
